<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <title>Document</title>
  <style>
    .item {
      margin: 0px auto 10px;
    }
    body {
      font-size: 14px;
    }
    .vgt {
      color: rgb(49, 94, 79);
    }
    .egg {
      color:rgb(156, 140, 48);
    }
    .meat {
      color: rgb(97, 26, 26);
    }
    .glyphicon-plus {
      color: green;
    }

    .glyphicon-remove {
      color: rgb(185, 185, 185);
    }
  </style>
</head>

<body>

  <div id='order-food' class="container" style="margin: 20px auto 20px;" >
    <div id="menus" class="row">
      <!-- 青菜类 -->
      <div class="col-xs-6 col-md-2 item vgt" v-for="v in vgts" :key="v" v-on:click='addMenus(v)'>
        <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;{{ v.name }} {{ v.price }}
      </div>
      <!-- 蛋类 -->
      <div class="col-xs-6 col-md-2 item egg" v-for="e in eggs" :key="e" v-on:click='addMenus(e)'>
        <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;{{ e.name }} {{ e.price }}
      </div>
      <!-- 其他菜 -->
      <div class="col-xs-6 col-md-2 item meat" v-for="m in menus" :key="m" v-on:click='addMenus(m)'>
        <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;{{ m.name }} {{ m.price }}
      </div>
    </div>

    <div class="row" style="margin-top: 10px">

      <div class="col-md-1">
        <a href="./resources/img/2.jpg" class="thumbnail">
          <img src="./resources/img/2.jpg" alt="" srcset="">
        </a>
      </div>
      <div class="col-md-1">
        <a href="./resources/img/1.jpg" class="thumbnail">
          <img src="./resources/img/1.jpg" alt="" srcset="">
        </a>
      </div>
      <div class="col-xs-6 col-md-2 col-md-offset-1">
        <div class="input-group">
          <span class="input-group-addon" id="sizing-addon2">吃饭人数：</span>
          <input id='customers' type="number" class="form-control" placeholder="" v-model="customers">
        </div>
      </div>
      <div class="col-xs-6 col-md-2">
          <a id='order-btn' class="btn btn-success" type="submit" v-on:click='randomOrder()'>随机点菜</a>
      </div>
      <div class="col-xs-6 col-md-5">
          规则：煎蛋(黄色字)和青菜(绿色字)各随机一个菜，剩下的在红色区菜单随机点，一人一菜，点<span class="glyphicon glyphicon-plus"></span>可加菜，点<span class="glyphicon glyphicon-remove"></span>可减已点
      </div>
    </div>

    <div class="row" style="margin-top: 10px">
      <div class="col-xs-6 col-md-2 item" v-for="o in orderResults" :key="o" v-on:click='removeFood(o)'>
        <span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;{{ o.name }} {{ o.price }}
      </div>

      <div class="col-xs-12 item">
        {{ customers }}个人{{ orderResults.length }}个菜, 共：{{total}}元&nbsp;&nbsp;&nbsp;&nbsp;人均：{{(total/customers).toFixed(2)}}元
      </div>
    </div>

  </div>
</body>
<script src="./resources/js/vue.js"></script>
<script src="./resources/js/foods.js"></script>
<script>
  // alert(navigator.userAgent);
  function randomArray(num) {
    var ary = []
    for (var i = 0; i < num; i++) {
      ary[i] = i + 1
    }
    ary.sort(function () {
      return 0.5 - Math.random() //返回随机正负值
    })
    return ary
  }

  function countPrice(foods) {
    var total = 0
    for (let i = 0; i < foods.length; i++) {
      total += parseInt(foods[i].price)
    }
    return total
  }

  new Vue({
    el: '#order-food',
    data: {
      vgts: vegetables,
      eggs,
      menus,
      customers: 7,
      orderResults: [],
      total: 0,
    },
    methods: {
      // 随机点菜
      randomOrder: function (e) {
        this.orderResults = new Array()
        var egg = eggs[randomArray(eggs.length)[0] - 1]
        var vgt = vegetables[randomArray(vegetables.length)[0] - 1]
        this.orderResults.push(egg)  // 青菜
        this.orderResults.push(vgt) // 煎蛋
        var orderIndexs = randomArray(menus.length).slice(0, this.customers - 2)
        for (let i = 0; i < orderIndexs.length; i++) {
          const food = menus[orderIndexs[i] - 1]
          this.orderResults.push(food)
        }
        this.total = countPrice(this.orderResults)
      },
      // 加菜
      addMenus(food) {
        this.orderResults.push(food)
        this.total = countPrice(this.orderResults)
      },
      // 减菜
      removeFood(food) {
        var count = 0
        this.orderResults = this.orderResults.filter(function (item) {
          if (count > 0) {
            return true
          }
          if (food.name == item.name) {
            count += 1
          }
          return item.name != food.name
        })
        this.total = countPrice(this.orderResults)
      },
    }
  })

</script>

</html>
